.event-statistical {
	display: flex;
	height: 25.5rem;
	padding: 1.5rem;
	border-top: 1px solid var(--color-border-2);

	.pie-chart {
		display: flex;
		flex-direction: column;
		width: 28.75rem;

		.empty-container {
			display: flex;
			flex: 1 0 0;
			align-items: center;
			justify-content: center;

			.empty {
				.empty-content {
					color: var(--color-text-1);
					text-align: center;

					.num {
						margin-top: 0.5rem;
						font-size: var(--text-xl);
					}
				}
			}
		}
	}

	.table-container {
		flex: 1 0 0;
		min-width: 38rem;

		.event-table-container {
			display: flex;
			align-items: center;
			height: 100%;

			.table-wapper {
				width: 100%;
				border: 1px solid var(--color-border-2);
				border-top: none;
				border-right: none;

				.table {
					width: 100%;
					border-spacing: 0;

					.name {
						width: 10.5rem;
					}

					.num {
						display: flex;
						align-items: center;

						.progress {
							flex: 1 0 0;
							min-width: 17.5rem;
						}

						.count {
							width: 7rem;
							text-align: right;
						}
					}

					th {
						font-weight: normal;
						text-align: left;
						background-color: var(--color-bg-2);
					}

					td,
					th {
						height: 2.25rem;
						padding: 0 1.5rem;
						border-top: 1px solid var(--color-border-2);
						border-right: 1px solid var(--color-border-2);
					}
				}
			}
		}
	}

	.item {
		display: flex;
		flex-direction: column;

		.chart {
			flex: 1 0 0;
		}
	}
}
